<template>
  <div id="barCharts" ref="barCharts" class="barCharts" />
</template>
<script>
export default {
  name: 'BarCharts',
  props: {
    datas: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      resData: {}
    }
  },
  watch: {
    datas: {
      handler(newValue) {
        if (JSON.stringify(newValue) !== '{}') {
          this.resData = {
            yAxisData: newValue['name'],
            seriesData: newValue['data1']
          }
          this.getEcharts()
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    getEcharts() {
      if (!this.resData || !this.resData.yAxisData || this.resData.yAxisData.length === 0) {
        this.resData = {
          yAxisData: [''],
          seriesData: [0]
        }
      }
      // 接下来的使用就跟之前一样，初始化图表，设置配置项
      const myChart = this.$echarts.init(this.$refs.barCharts)
      myChart.setOption({
        backgroundColor: '#fff',
        grid: {
          left: '2%',
          right: '5%',
          bottom: '5%',
          top: '16%',
          containLabel: true
        },
        xAxis: [{
          min: 0,
          max: 100,
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#86909C'
            }
          },
          show: true,
          type: 'value',
          axisTick: {
            show: false
          },
          splitLine: { // 纵向分隔线
            show: true,
            lineStyle: {
              color: '#DCDFE6',
              type: 'dashed'
            }
          }
        }, {
          type: 'value',
          axisLine: {
            show: false
          }
        }],
        yAxis: [{
          name: this.title,
          nameTextStyle: {
            color: '#86909C'
          },
          data: this.resData.yAxisData,
          axisLine: {
            lineStyle: {
              color: '#C9CDD4'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#86909C'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }],
        dataZoom: [
          {
            type: 'inside', // 滑动条
            show: true, // 开启
            yAxisIndex: 0
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            stack: 'all',
            barWidth: 12,
            data: this.resData.seriesData,
            itemStyle: {
              color: this.color
            }
          }
        ]

      })
    }
  }
}
</script>
  <style lang="scss" scoped>
  .barCharts{
    width: 100%;
    height: 300px;
  }
  </style>
